﻿@model MAPDavy.Entities.Term

@{
    ViewBag.Title = "LoaderRit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section JavaScript{
    <script src="@Url.Content("~/Scripts/AjaxUpload.2.0.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.progressbar.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.tmpl.js")" type="text/javascript"></script>
     <script src="@Url.Content("~/Scripts/models/config.loader.js")" type="text/javascript"></script>
    <script type="text/x-jquery-tmpl" id="mapTemplate">
      <tr>
        <td>
            ${StudentID}
        </td>
        <td>
            ${Student}
        </td>
        <td>
            ${RIT}
        </td>
        <td>
            ${Grade}
        </td>        
    </tr>
    </script>
    <script type="text/javascript">
        _urlUpload = '@Url.Action("UploadRit","Score")';
        _urlLoadData = '@Url.Action("ShowLoadData", "Score")';
        _urlLoadTest = '@Url.Action("GetTestbyTermAndGradeServiceJson", "Test")';
        _urlBach = '@Url.Action("RegistarRitBach", "Score")';

        $(document).ready(function () {

            $("#mapData thead tr th").addClass("ui-widget ui-widget-header");

            $("#error").hide();
            $("#dirty").hide();
            $("#mainC").hide();
            $("#procesar").hide();

            var _termId = $("#termId").val();

            new AjaxUpload('#btnUpload', {
                action: '@Url.Action("UploadRit","Score")',
                onSubmit: function (file, ext) {
                    if (!(ext && /^(xlsx)$/.test(ext))) {
                        // extensiones permitidas
                        jAlert('Solo se permiten archivo de Excel 2007 o superior', 'Error');
                        // cancela upload
                        return false;
                    } else {
                        $('#btnUpload').attr('disabled', 'true');
                        $("#procesar").hide("slow");
                        this.disable();

                        $("#error").hide("slow");
                        $("#mainC").hide("slow");

                        $("#grade").attr('disabled', 'true');
                        $("#test").attr('disabled', 'true');
                    }
                },
                onComplete: function (file, response) {
                    $("#proceso").html('');
                    $("#proceso").append('<li>Archivo Cargado....</li>');
                    // enable upload button
                    $('#btnUpload').removeAttr('disabled');
                    this.enable();

                    var error = false;

                    $.post(
                      '@Url.Action("ShowLoadData", "Score")',
                      { complete: 'true' },
                      function (data) {
                          if (data.exito) {
                              $("#mapData tbody tr").remove();

                              setTimeout('$("#mainC").show("slow");', 50);

                              $("#mapTemplate").tmpl(data.mapRit).appendTo("#mapData tbody").fadeIn("slow");

                              $("#mapData  tbody tr").each(function (index, element) {
                                  var progreso = parseInt(index * 100 / data.count);

                                  $(this).children("td").each(function (index2) {

                                      var val = $.trim($(this).html());
                                      var td = $(this);

                                      if (val.length == 0) {
                                          $(this).css("background-color", "#FF0000");
                                          error = true;
                                      }
                                      if (index2 == 2) {
                                          if (val < 0 || val > 300) {
                                              $(this).css("background-color", "#00CCFF");
                                              error = true;
                                          }
                                      }
                                      if (index2 == 3) {
                                          var _grade = $("#grade option:selected").text();
                                          if (_grade.toLowerCase() != val.toLowerCase()) {
                                              $(this).css("background-color", "#00FF00");
                                              error = true;
                                          }
                                      }
                                  })
                              });

                              if (error) {
                                  setTimeout('$("#error").show("slow");', 1000);
                              }
                              else {
                                  setTimeout('$("#procesar").show("slow");', 1000);
                              }

                              $("#mapData tbody tr").hover(
                                  function () {
                                      $(this).addClass("ui-state-highlight");
                                  },
                                  function () {
                                      $(this).removeClass("ui-state-highlight");
                                  });

                              $("#proceso").append('<li>Datos Leidos.....</li>');
                          }
                          else {
                              jAlert(data.msg, "ERROR")
                          }
                      },
                      "json"
                     );

                    $("#msg").hide('slow');
                }
            });

            $("#grade").change(function () {
                $("#msg").hide('slow');
                var _gradeId = $("#grade option:selected").val();

                $("#test").ajaxError(function (event, request, settings) {
                    $("#test").append(
                                $('<option>').text('Selecciona un Subject').val('')
                            );
                });
                $("#msg").hide('slow');
                $.getJSON(
                    '@Url.Action("GetTestbyTermAndGradeServiceJson", "Test")',
                    { termId: _termId, gradeId: _gradeId },
                    function (data) {
                        $("#test").html('');
                        $.each(data, function (i, item) {
                            $("#test").append(
                                $('<option>').text(item.Subject).val(item.Id)
                            ).find('option:last').hide().fadeIn("slow");
                        });
                    });
                $("#msg").hide('slow');
            });

            $("#btnProcessar").click(function () {
                $("#procesar").hide("slow");
                $("#mainC").hide("slow");
                $("#load").hide('slow');
                $("#proceso").html('');

                var _gradeId = $("#grade option:selected").val();
                var _testId = $("#test option:selected").val();

                $.post('@Url.Action("RegistarRitBach", "Score")',
                      { termId: _termId, gradeId: _gradeId, testId: _testId },
                      function (data) {
                          if (data.exito) {
                              $("#proceso").append('<li>' + data.msg + '</li>');

                              if (data.dirty.length>0) {
                                  $("#dirty").show("slow");

                                  $("#mapData tbody tr").remove();

                                  setTimeout('$("#mainC").show("slow");', 50);

                                  $("#mapTemplate").tmpl(data.dirty).appendTo("#mapData tbody").fadeIn("slow");

                                  $("#mapData tbody tr").hover(
                                  function () {
                                      $(this).addClass("ui-state-highlight");
                                  },
                                  function () {
                                      $(this).removeClass("ui-state-highlight");
                                  });
                              }
                          }
                          else {
                              jAlert(data.msg, "ERROR")
                          }
                      },
                      "json"
                     );
            });

            $("#btnRefresh").click(function () {
                $("#error").hide("slow");
                $("#dirty").hide("slow");
                $("#mainC").hide("slow");
                $("#procesar").hide("slow");
                $("#msg").hide('slow');

                $("#grade").removeAttr('disabled');
                $("#test").removeAttr('disabled');

                $('#load').show("slow");
                $("#procesar").hide("slow");

            });
        });       
    </script>
 }
<div class="cpanel ui-widget ui-widget-content ui-corner-all">
    <table class="toolbar">
        <tr>
            <td valign="middle" >
                <img src="@Url.Content("~/Content/images/loader.png")" alt="evaluaciones" />
            </td>
            
            <td class="tdHeader">
                <span class="header">
                  @Html.Hidden("termId",Model.Id) Cargar RIT de Forma Masiva: @Html.DisplayFor(model => model.NameTerm) -  @Html.DisplayFor(model => model.MAP.NameMap)
                </span>
            </td>
            <td class="cerrado" id="load"><center>
                <div  id="btnUpload">
                   <img src="@Url.Content("~/Content/images/load.png")" title="Load" alt="Load" />
                    <br /><span class="label">  Load  </span>
                </div></center>
            </td>
            <td class="cerrado" id="procesar"><center>
                <div id="btnProcessar" class="cursor">
                   <img src="@Url.Content("~/Content/images/procesar.png")" title="Procesar" alt="Procesar" />
                    <br /><span class="label">Procesar</span>
                </div></center>
            </td>
            <td class="cerrado" id="refresh"><center>
                <div id="btnRefresh" class="cursor">
                   <img src="@Url.Content("~/Content/images/pageRefresh.png")" title="Refresh" alt="Refresh" />
                    <br /><span class="label">Refresh</span>
                </div></center>
            </td>
            <td><center>
                <a href="@Url.Action("Index", "Term")">
                    <img src="@Url.Content("~/Content/images/back.png")" title="Candelar" alt="Candelar" />
                    <br /><span class="label">Cancelar</span>
                </a></center>
            </td>
        </tr>
    </table>
</div> 
<div class="titleView ui-widget ui-widget-content ui-corner-all">
    <b> Grade Level: </b> @Html.DropDownList("grade") 
    <b> Subject: </b> @Html.DropDownList("test")
</div>
<div id="error" class="ui-widget" style="padding: 5px;">
    <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
	    <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> 
		    <strong>Atención:</strong> El arhivo suministrado contiene algunas incoherencias o le faltan datos, no podra ser procesado hasta que lo corrija</p>
    </div>
</div>
<div>
    <div id="msg"class="ui-widget">
        <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 10px;">      
	        <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
                <strong>Mensaje:</strong>
                <span id="msgT"></span></p>
                <div id="progressbarT"></div>
                <ul id="proceso"></ul>            
	    </div>
    </div>
</div>
<div id="dirty" class="ui-widget" style="padding: 5px;">
    <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
	    <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> 
		    <strong>Atención:</strong> Los Resultados de los Siguiente Alumnos no han podido
                ser registrados ya sea porque no exiten en el sistema o no estan matriculados en el
                grado seleccionado.
            </p>
    </div>
</div>
<br />
<div id="mainC" class="titleView ui-widget ui-widget-content ui-corner-all">
    <div id="mapContenedor">
        <table id="mapData">
    <thead>
    <tr id="m-header">
        <th>
            StudentID
        </th>
        <th>
            Student
        </th>
        <th>
            RIT
        </th>
        <th>
            Grade
        </th>
    </tr>
   </thead>
    <tbody>
    <tr>
        <td>
            ${StudentID}
        </td>
        <td>
            ${Student}
        </td>
        <td>
            ${RIT}
        </td>
        <td>
            ${Grade}
        </td>        
    </tr>
    </tbody>
</table>
    </div>
</div>